<?php require_once('includes.php'); ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CS499 - MPG Consumption</title>

<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div id="pagewrap">

  <div id="header">
    <div class="page-title"><h2>Fuel Cost Calculator</h2></div>
    <div class="national-prices">
      <?php
      $prices = get_national_prices();
      if ($prices) {
        echo "<div class='top-price-left'>
                <span class='price-type'>Regular: </span>
                <span class='price-value'>$prices->regular</span>
              </div>";
        echo "<div class='top-price-middle'>
                <span class='price-type'>Midgrade: </span>
                <span class='price-value'>$prices->midgrade</span>
                </div>";
        echo "<div class='top-price-right'>
                <span class='price-type'>Premium: </span>
                <span class='price-value'>$prices->premium</span>
              </div>";
      }
      ?>
    </div>
  </div>
  <div id="left-sidebar">
    <h3>More Fuel Types</h3>
    <?php
    if ($prices) {
      echo "<span>Diesel: " . $prices->diesel . "</span>";
      echo "<span>Electric: " . $prices->electric . "</span>";
      echo "<span>CNG: " . $prices->cng . "</span>";
      echo "<span>Ipg: " . $prices->lpg . "</span>";
      echo "<span>e85: " . $prices->e85 . "</span>";
    }
    ?>

  </div>

	<div id="content">
    <h2>Select Your Vehicle</h2>
      <div class="vehicle-select">
        <form class="contact_form" action="" method="post">
          <div class="gas-price">
            <ul>
              <li>
                <input type="text" name="gas_price" placeholder="Regular Gas" required  />
                <span class="form_hint">Enter Price</span>
              </li>
              <li>
              <input type="text" name="miles" placeholder="Miles per week" required />
              <span class="form_hint">Number of miles driven per week</span>
              </li>
            </ul>
          </div>
          <select name="drop_1" id="drop_1">
            <option value="" selected="selected" disabled="disabled">Choose Year</option>
            <?php year_select(); ?>
          </select>
          <span id="wait_1">
            <img alt="Please Wait" src="img/ajax-loader.gif"/>
          </span>
          <span id="result_1"></span>
          <span id="wait_2">
            <img alt="Please Wait" src="img/ajax-loader.gif"/>
          </span>
          <span id="result_2"></span>
          <span id="wait_3">
            <img alt="Please Wait" src="img/ajax-loader.gif"/>
          </span>
          <span id="result_3"></span>

        <span id="wait_4">
          <img alt="Please Wait" src="img/ajax-loader.gif"/>
        </span>
        <span id="result_4"></span>

        </form>
      </div>
      <div class="report-display">
        <div class="vehicle-info">
          <?php display_vehicle_info(); ?>
        </div>
        <div class="gas-info">
        <?php //display_gas_info(); ?>
        <?php display_fuel_cost();?>
        <?php display_national_fuel_cost(); ?>
        </div>
      </div>
	</div>

	<div id="sidebar">
    <h3>More Fuel Types</h3>
      <?php
    if ($prices) {
      echo "Diesel: " . $prices->diesel . "</br>";
      echo "Electric: " . $prices->electric . "</br>";
      echo "CNG: " . $prices->cng . "</br>";
      echo "Ipg: " . $prices->lpg . "</br>";
      echo "e85: " . $prices->e85 . "</br>";
    }
      ?>
	</div>

	<div id="footer">
    <h4>Developed By Marcelo Coelho</h4>
    <h5>American Sentinel University</h5>
	</div>

</div>

</body>
</html>